<template>
    <div>
<div id="main" class="hello" style="width: 100%; height: 400px"></div>
    </div>
</template>

<script>
import echarts from "echarts";
//ajax接口

//接收参数

    export default {
        data(){
            return {

            }
        },
        created(){
           
        },
        props:["option"],
         mounted() {
             console.log("接收echats");
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));

    // 指定图表的配置项和数据
    var option = {
      title: {
        text: this.option.text,
      },
      tooltip: {
        trigger: "axis",
      },
      legend: {
 
        data: ["订单数据", "金额数量"],//
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data:this.option.xData,//时间
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "订单数据",
          type: "line",
          stack: "总量",
          data:this.option.amountData,
        },
        {
          name: "金额数量",
          type: this.option.type,
          stack: "总量",
          data:this.option.orderData,
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  },
    }
</script>

<style lang="less" scoped>
/deep/.hello {
  width: 100%;
  height: 400px;
  margin-top: 20px;
}
</style>